<template>
  <nav class="bg-white shadow-md fixed w-full z-50 transition-all duration-300" :class="{'bg-white/95 backdrop-blur-sm': scrolled}">
    <div class="container mx-auto px-4">
      <div class="flex justify-between items-center h-16">
        <!-- Logo区域 -->
        <div class="flex-shrink-0">
          <router-link to="/" class="flex items-center space-x-2">
            <span class="text-primary text-2xl font-bold">VueNav</span>
          </router-link>
        </div>

        <!-- 桌面端菜单 -->
        <div class="hidden md:flex space-x-8">
          <router-link to="/" class="nav-link" :class="{ 'active': $route.path === '/' }">首页</router-link>
          <router-link to="/features" class="nav-link" :class="{ 'active': $route.path === '/features' }">功能</router-link>
          <router-link to="/pricing" class="nav-link" :class="{ 'active': $route.path === '/pricing' }">价格</router-link>
          <router-link to="/about" class="nav-link" :class="{ 'active': $route.path === '/about' }">关于</router-link>
        </div>

        <!-- 登录/注册按钮 -->
        <div class="hidden md:flex items-center space-x-4">
          <router-link to="/login" class="px-4 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary transition-colors">登录</router-link>
          <router-link to="/signup" class="px-4 py-2 rounded-md text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all">注册</router-link>
        </div>

        <!-- 移动端菜单按钮 -->
        <div class="md:hidden">
          <button type="button" class="text-gray-500 hover:text-primary focus:outline-none" @click="toggleMobileMenu">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="md:hidden" :class="{ 'block': mobileMenuOpen, 'hidden': !mobileMenuOpen }">
      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white/95 backdrop-blur-sm shadow-lg">
        <router-link to="/" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 transition-colors" :class="{ 'bg-gray-100 text-primary': $route.path === '/' }">首页</router-link>
        <router-link to="/features" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 transition-colors" :class="{ 'bg-gray-100 text-primary': $route.path === '/features' }">功能</router-link>
        <router-link to="/pricing" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 transition-colors" :class="{ 'bg-gray-100 text-primary': $route.path === '/pricing' }">价格</router-link>
        <router-link to="/about" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-100 transition-colors" :class="{ 'bg-gray-100 text-primary': $route.path === '/about' }">关于</router-link>
      </div>
      <div class="pt-4 pb-3 border-t border-gray-200 bg-white/95 backdrop-blur-sm">
        <div class="flex items-center px-5">
          <router-link to="/login" class="w-full block px-4 py-2 border border-gray-300 rounded-md text-base font-medium text-center text-gray-700 hover:bg-gray-50 transition-colors">登录</router-link>
        </div>
        <div class="mt-3 flex items-center px-5">
          <router-link to="/signup" class="w-full block px-4 py-2 rounded-md text-base font-medium bg-primary text-white hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all">注册</router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navigation',
  data() {
    return {
      mobileMenuOpen: false,
      scrolled: false
    }
  },
  mounted() {
    // 监听滚动事件来改变导航栏样式
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    toggleMobileMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    },
    handleScroll() {
      this.scrolled = window.scrollY > 20
    }
  }
}
</script>

<style scoped>
:root {
  --primary: #3b82f6;
}

.nav-link {
  @apply px-3 py-2 rounded-md text-base font-medium text-gray-600 hover:text-primary hover:bg-gray-50 transition-all duration-200;
}

.nav-link.active {
  @apply text-primary bg-blue-50;
}
</style>
